// webpack 打包 gzip 的依赖
const CompressionPlugin = require("compression-webpack-plugin");
const productionGzipExtensions = ["js", "css"]
// 判断是否是 test 环境
const isTestEnv = process.env.NODE_ENV === 'development'
// 判断是否是 production 环境
const isProdEnv = process.env.NODE_ENV === 'production'
const Timestamp = new Date().getTime();
module.exports = {
  // 基本路径,相对路径
  publicPath: "./",
  // 输出文件目录
  outputDir: process.env.outputDir,
  // 测试环境和生产环境都不生成 map 文件
  productionSourceMap: isTestEnv || isProdEnv ? false : true,
  css: {
    loaderOptions: {
      scss: {
        prependData: `@import "@/util/common.scss";`
      },
    },
  },
  configureWebpack: config => {
    if (isTestEnv || isProdEnv) {
      const plugins = []
      plugins.push(new CompressionPlugin({
        //[file] 会被替换成原始资源。[path] 会被替换成原始资源的路径， [query] 会被替换成查询字符串。默认值是 "[path].gz[query]"。
        // filename: '[path].gz[query]', // 提示compression-webpack-plugin@3.0.0的话asset改为filename
        //可以是 function(buf, callback) 或者字符串。对于字符串来说依照 zlib 的算法(或者 zopfli 的算法)。默认值是 "gzip"。
        algorithm: 'gzip',
        //所有匹配该正则的资源都会被处理。默认值是全部资源。
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
        //只有大小大于该值的资源会被处理。单位是 bytes。默认值是 0。
        threshold: 10240,
        //只有压缩率小于这个值的资源才会被处理。默认值是 0.8。
        minRatio: 0.8
      }))
      // CompressionPlugin 合并 vue-cli 的 plugins
      config.plugins = [...config.plugins, ...plugins]
      // 告诉 webpack 哪些是不用被打包的模块
      // config.externals = {
      //   'vue': 'Vue',
      //   'vue-router': 'VueRouter',
      //   'vuex': 'Vuex',
      //   'axios': 'axios',
      //   'swiper': 'Swiper',
      //   'vant': 'vant',
      //   'svgaplayerweb': 'SVGA',
      //   'echarts': 'echarts'
      // },
      // js代码的压缩
      config.optimization.minimize = true;
    }
  },
  chainWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
        // 给js和css配置版本号
        config.output.filename('js/[name].' + Timestamp + '.js').end();
        config.output.chunkFilename('js/[name].' + Timestamp + '.js').end();
        config.plugin('extract-css').tap(args => [{
            filename: `css/[name].${Timestamp}.css`,
            chunkFilename: `css/[name].${Timestamp}.css`
        }])
    }

  },
  devServer: {
    // host:'192.168.0.109',
    port: 8080,
    overlay: {
      warning: false,
      errors: false,
    },

    proxy: {
      '/api': {
        target: 'http://pro.sprout-edu.com:9101',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      },
    }
  },
};